// 负责管理所有的自定义指令
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

export const imagerror = {
  // 指令对象 会在当前的dom元素插入到节点之后执行
  inserted(dom, options) {
    // 如果有值就用 没有用默认的
    dom.src = dom.src || options.value
    // console.log(options);
    // options是 指令的变量的解释 其中有一个属性叫做.value
    // dom 表示当前指令作用的dom对象
    // dom 认为此时就是图片
    // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
    dom.onerror = function () {
      // 当图片出现异常的时候，会将指令配置的默认图片设置为该图片的内容
      // dom可以注册error事件
      // console.log(66);
      dom.src = options.value // 不能写死
    }
  },
  componentUpdated(dom, options) {
    // 该钩子函数会在当前指令作业的组件 更新数据完毕之后 执行
    // inserted只会执行一次
    // 组件初始化 一旦更新就会再进入 inserted函数 还会进去 componentUpdated
    dom.src = dom.src || options.value
  }
}

// export const loading = {
//   inserted(dom, options) {
//     // NProgress.done()
//     if (options.value) {
//       NProgress.start() // 开启进度条
//     }
//     // NProgress.done()
//   },
//   update(dom, options) {
//     if (!options.value) {
//       // console.log(6);
//       NProgress.done()
//     }
//   }
// }